<!--
  组件：鼠标层级缩放控件
  作者：kuake
  时间：2023年01月02日
  网址：https://gis.1024ape.com
  系统：WebGIS 地理信息平台
-->
<script>
import ZoomSlider from 'ol/control/ZoomSlider'
import Zoom from 'ol/control/Zoom'
import { mapState } from 'pinia'
import { useMapStore } from '../../stores/mapStore'

export default {
	name: 'FmZoom',
	computed: {
		...mapState(useMapStore, ['map'])
	},
	watch: {
		map() {
			this.map.addControl(new Zoom())
			this.map.addControl(new ZoomSlider())
		}
	}
}
</script>

<style lang="scss">
.ol-zoomslider,
.ol-zoom {
	right: 0.5em;
	left: unset;
	top: unset;
}
.ol-zoomslider {
	bottom: 10.5em;
}
.ol-zoom {
	bottom: 7em;
}

.ol-control {
	position: absolute;
	background-color: #ffffff;
	border-radius: 2px;
	// border: 1px solid #181a1d;
}
.ol-zoomslider button {
	background: #000 !important;
}
.ol-zoom button:hover,
.ol-zoom button:focus {
	background: #e7e3e3 !important;
	outline: unset;
}
</style>
